<template>
  <div id="indexfourt" :style="{ width, height }"></div>
</template>

<script>
import { queryPrList } from '@/api/collection/board'
import resize from '@/views/dashboard/mixins/resize'

export default {
  name: 'indexfourt',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }

  },
  data() {
    return {
      chart: null,
      timer: null
    }
  },
  watch: {},
  mounted() {

    this.$nextTick(() => {
      this.initChart()
    })
    //设置定时器
    this.timer = setInterval(() => {
      this.initChart()
    }, 5000)

  },

  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    initChart() {

      const echarts = this.$echarts
      if (this.chart === null) {
        this.chart = echarts.init(document.getElementById('indexfourt'))
      }
      queryPrList().then((response) => {
        let dasxys = []
        let dateList = []
        for (let index = 0; index < response.length; index++) {
          const element = response[index]

          dasxys.push(element.desc.substring(0, 5))
          dateList.push(parseFloat(element.value.toFixed(2)))
        }

        var option = {
          grid: {
            left: '3%',
            right: '4%',
            bottom: '1%',
            top: '20%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: dasxys,
            axisTick: { show: false },
            axisLabel: {
              textStyle: { color: '#fff' }
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255,0.5)'
              }
            }

          },
          yAxis: {
            type: 'value',
            axisTick: { show: false },
            axisLabel: {
              textStyle: { color: '#fff' }
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255, 255, 255,0.5)'
              }
            }

          },
          series: [
            {
              type: 'bar',
              data: dateList,
              barWidth: '30%',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
                  }], false),
                  shadowColor: 'rgba(0,160,221,1)',
                  shadowBlur: 4
                }
              },
              label: {
                normal: {
                  show: true,
                  lineHeight: 10,
                  formatter: '{c}',
                  position: 'top',
                  textStyle: {
                    color: '#00D6F9',
                    fontSize: 12
                  }

                }
              }
            }

          ]
        }
        this.chart.setOption(option)
      })

    }
  }
}
</script>
